<!-- 主题设置模板 -->

<script type="text/html" template lay-done="layui.data.theme();">
    {{#
    var local = layui.data(layui.setter.tableName);
    var theme = local.theme || {};
    var color = theme.color || {};
    var themeColorIndex =  parseInt((theme && theme.color) ? theme.color.index : 0) || 0;
    }}

    <div class="layui-card-header">
        <strong>主题设置</strong>
    </div>
    <div class="layui-card-body layadmin-setTheme">
        <h5><strong>布局切换</strong></h5>
        <ul class="layadmin-setTheme-color">
            <li data-index="1" class="layout layout1" title="单侧边栏">
                <div class="layadmin-setTheme-header"></div>
                <div class="layadmin-setTheme-side" style="background-color: #03152A;width: 20px">
                    <div class="layadmin-setTheme-logo"></div>
                </div>
            </li>
            <li data-index="2" class="layout layout2" title="双侧边栏">
                <div class="layadmin-setTheme-header"></div>
                <div class="layadmin-setTheme-side" style="background-color: #03152A;width: 10px">
                    <div class="layadmin-setTheme-logo"></div>
                </div>
                <div class="layadmin-setTheme-side" style="background-color: #fff;width: 10px;left: 10px"></div>
            </li>
        </ul>
        <h5><strong>配色方案</strong></h5>
        <ul class="layadmin-setTheme-color">
            {{# layui.each(layui.setter.theme.color, function(index, item){ }}
            <li layadmin-event="setTheme" data-index="{{ index }}" data-alias="{{ item.alias }}"
                {{- index=== themeColorIndex ?
            'class="layui-this"' : '' }} title="{{ item.alias }}">
            <div class="layadmin-setTheme-header" style="background-color: {{ item.header }};"></div>
            <div class="layadmin-setTheme-side" style="background-color: {{ item.main }};">
                <div class="layadmin-setTheme-logo" style="background-color: {{ item.logo }};"></div>
            </div>
            </li>
            {{# }); }}
        </ul>
        <h5><strong>自定义配色</strong></h5>
        <ul class="layadmin-setTheme-custom">
            <li>主题色
                <div class="set-custom-theme" data-name="main" lay-options="{color: '{{= color.main }}'}"></div>
            </li>
            <li>选中色
                <div class="set-custom-theme" data-name="selected" lay-options="{color: '{{= color.selected }}'}"></div>
            </li>
            <li>LOGO 背景色
                <div class="set-custom-theme" data-name="logo" lay-options="{color: '{{= color.logo }}'}"></div>
            </li>
            <li>头部拦背景色
                <div class="set-custom-theme" data-name="header" lay-options="{color: '{{= color.header }}'}"></div>
            </li>
            <li>恢复默认主题
                <div class="set-default-theme">
                    <button class="layui-btn layui-btn-primary"><i class="layui-icon layui-icon-refresh-1"></i></button>
                </div>
            </li>

        </ul>
        <h5><strong>其他设置</strong></h5>
        <ul class="layadmin-setTheme-custom">

            <li style="height: 120px">表格按钮样式
                <div class="layui-form" data-name="btn-style" lay-options="{color: '{{= color.header }}'}"
                     style="width: 70px;z-index: 99999">
                    <select id="btn-style" lay-filter="btn-style">
                        <option value="1">文字</option>
                        <option value="2">按钮</option>
                    </select>
                </div>
            </li>
        </ul>
</script>

<script>
    layui.data.theme = function () {
        layui.use(['form', 'colorpicker'], function () {
            var $ = layui.$;
            var layer = layui.layer;
            var form = layui.form
            var colorpicker = layui.colorpicker
            var admin = layui.admin;
            var view = layui.view;

            form.render();
            var local = layui.data(layui.setter.tableName);
            var theme = local.theme || {};
            var color = theme.color || {};
            init();
            // 自定义配色
            colorpicker.render({
                elem: '.set-custom-theme',
                done: function (value) {
                    var elem = this.elem;
                    var NAME = elem.data('name');

                    color[NAME] = value;

                    admin.theme({
                        color: color
                    });
                }
            });

            $('.layout').on('click', function () {
                var index = $(this).attr('data-index');
                $.post('/' + $('#admin_map').val() + '/index/setSetting.html', {key: 'layout', value: index}, function (d) {
                    location.reload()
                })
            })
            // 恢复默认主题
            $('.set-default-theme').on('click', function () {
                layer.confirm('确认恢复默认主题吗？', function (i) {
                    layer.close(i);
                    admin.events.setTheme($('.layadmin-setTheme-color>li:eq(0)'));
                    admin.initTheme(0);
                    view('LAY_adminPopupTheme').render('system/theme');
                })
            });

            // 事件-隐藏开关
            form.on('switch(system-theme-sideicon)', function () {
                admin.theme({
                    hideSideIcon: this.checked
                })
            });

            function init() {
                $.get('/' + $('#admin_map').val() + '/index/getSetting.html', {key: 'btn_style'}, function (d) {
                    var html;
                    if (parseInt(d.data.btn_style) === 1) {
                        html = '<option value="1" selected>文字</option><option value="2">按钮</option>';
                    } else {
                        html = '<option value="1" >文字</option><option value="2" selected>按钮</option>';
                    }
                    $("#btn-style").html(html);
                    form.render();

                    $('.layout' + d.data.layout).addClass('layui-this');
                });
            }

            // 事件-按钮偏好
            form.on('select(btn-style)', function (data) {
                $.post('/' + $('#admin_map').val() + '/index/setSetting.html', {key: 'btn_style', value: data.value}, function (d) {
                    layer.msg(d.msg);
                })
            });
        });
    };
</script>
